<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-09-27 16:48:55
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-10-24 10:37:36
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-09-27 16:48:55
-->
<template>
  <view :class="classNames">
    <textarea
      ref="textareaRef"
      class="arco-textarea"
      :value="computedValue"
      :maxlength="computedMaxLength"
      :disabled="disabled"
      :auto-height="autoSize"
      :placeholder="placeholder"
      @input="handleInput"
    />
    <view v-if="showClearBtn" class="arco-textarea-clear-btn">
      <view
        class="arco-icon-hover arco-input-icon-hover arco-input-clear-btn"
        @click="handleClose"
      >
        <svgIcon name="guanbi1"></svgIcon>
      </view>
    </view>
    <view v-if="showWordLimit" class="arco-textarea-word-limit">{{
      valueLength + "/" + maxLength
    }}</view>
  </view>
</template>

<script lang="ts">
import { computed, defineComponent, ref, toRefs } from "vue";
import svgIcon from "../arco-icon/index.vue";
import { isFunction, isObject } from "@/utils/is";
import { useFormItem } from "@/ArcoUni/hook/use-form-item";
const icon = defineComponent({
  name: "Card",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  components: {
    svgIcon,
  },
  props: {
    modelValue: String,
    defaultValue: {
      type: String,
      default: "",
    },
    placeholder: String,
    disabled: {
      type: Boolean,
      default: false,
    },
    error: {
      type: Boolean,
      default: false,
    },
    maxLength: {
      type: [Number, Object],
      default: -1,
    },
    showWordLimit: {
      type: Boolean,
      default: false,
    },
    allowClear: {
      type: Boolean,
      default: false,
    },
    autoSize: {
      type: [Boolean, Object],
      default: false,
    },
    wordLength: {
      type: Function,
    },
    wordSlice: {
      type: Function,
    },
  },
  emits: ["update:modelValue", "clear", "input"],
  setup(props, { emit }) {
    const { disabled, error, modelValue } = toRefs(props);
    const prefixCls = "arco-textarea";

    const {
      mergedDisabled,
      mergedError: _mergedError,
      eventHandlers,
    } = useFormItem({
      disabled,
      error,
    });
    const textareaRef = ref();

    const _value = ref(props.defaultValue);

    const computedValue = computed(() => {
      var _a;
      return (_a = modelValue.value) != null ? _a : _value.value;
    });

    const getValueLength = (value) => {
      var _a;
      if (isFunction(props.wordLength)) {
        return props.wordLength(value);
      }
      return (_a = value.length) != null ? _a : 0;
    };
    const computedMaxLength = computed(() => {
      if (isObject(props.maxLength)) {
        return props.maxLength.length;
      }
      return props.maxLength;
    });

    const maxLengthErrorOnly = computed(
      () => isObject(props.maxLength) && Boolean(props.maxLength.errorOnly),
    );

    const mergedError = computed(
      () =>
        _mergedError.value ||
        Boolean(
          computedMaxLength.value &&
            maxLengthErrorOnly.value &&
            valueLength.value > computedMaxLength.value,
        ),
    );

    const showClearBtn = computed(
      () => props.allowClear && !mergedDisabled.value && computedValue.value,
    );

    const valueLength = computed(() => getValueLength(computedValue.value));

    const handleClose = () => {
      updateValue("");
      emit("update:modelValue", "");
      emit("clear");
    };

    const updateValue = (value) => {
      _value.value = value;
      emit("update:modelValue", value);
    };

    const handleInput = (e) => {
      const { value } = e.detail;
      updateValue(value);
      emit("input", value);
      const handlers = eventHandlers.value;
      if (handlers && typeof handlers.onInput === "function") {
        handlers.onInput(e);
      }
    };

    const classNames = computed(() => [
      `${prefixCls}-wrapper`,
      {
        [`${prefixCls}-disabled`]: mergedDisabled.value,
        [`${prefixCls}-error`]: mergedError.value,
      },
    ]);

    return {
      prefixCls,
      textareaRef,
      classNames,
      showClearBtn,
      computedMaxLength,
      handleClose,
      computedValue,
      handleInput,
      valueLength,
    };
  },
});
export default icon;
</script>
